<template>
	<w-layout showNavbar navTitle="全部订单" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="fr-ac">
					<view class="">
						<up-tabs
							@change="tabChange"
							:list="tabs.list" 
							:current="tabs.current"
							lineWidth="14"
							lineHeight="14"
							:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
							:activeStyle="{
								color: publicStyles['--color'],
								fontWeight: 'bold',
								transform: 'scale(1.2)'
							}"
							itemStyle="height: 60px;"
							:inactiveStyle="{
								'font-size': '32rpx',
							}"
						>
						</up-tabs>
					</view>
				</view>
				
				<view class="public-btn-11 mt-30">
					<up-tabs
						@change="levelTabChange"
						:list="level_tabs.list" 
						:current="level_tabs.current"
						lineWidth="14"
						lineHeight="14"
						:lineColor="'transparent'"
						:activeStyle="{
							color: publicStyles['--color'],
							fontWeight: 'bold',
							transform: 'scale(1)'
						}"
						itemStyle="height: 45px;width:100rpx;"
					>
					</up-tabs>
				</view>
				
				<!-- 赏品订单 -->
				<template v-if="tabs.current == 0 && state.list && state.list.length">
					<view @click="goDetail(item)" style="min-height: 320rpx;position: relative;" class="public-card-6 fc px-5 py-5 mt-40" v-for="(item,index) in state.list" :key="index">
						<view class="public-btn-11 px-40 py-30 fr-ac-jsb">
							<view class="op-70">
								申请时间：{{item.addtime}}
							</view>
							<view class="color">
								{{item.status_name}}
							</view>
						</view>
						<view class="mt-35 pb-40 px-40" style="">
							<scroll-view class="" scroll-x="true" >
								<view class="fr-ac">
									<view class="mr-30" v-for="(item2,index2) in item.order_list" :key="index2">
										<cut-corner :arrow="2" clipSize="25rpx">
											<image style="width: 150rpx;height: 150rpx;" :src="item2.goodslist_imgurl" mode="widthFix"></image>
										</cut-corner>
										<view class="fs-24 mt-15 ellipsis-1">
											{{item2.goodslist_title}}x{{item2.count}}
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="fr-ac mb-40 mr-40">
							<view class="fr-ac ml-auto">
								<view v-if="item.status != 0 && item.status != 1 " @click.stop="goLogistics(item)" class="color">
									查看物流
								</view>
								<view v-if="item.status == 2" @click.stop="get_warehouse_send_confirm(item.id)" class="color ml-40">
									确认收货
								</view>
							</view>
						</view>
					</view>
				</template>
				
				<!-- 商城订单 -->
				<template v-if="tabs.current == 1 && state.list && state.list.length">
					<view @click="goDetail(item)" style="min-height: 320rpx;position: relative;" class="public-card-6 fc px-5 py-5 mt-40" v-for="(item,index) in state.list" :key="index">
						<view class="public-btn-11 px-40 py-30 fr-ac-jsb">
							<view class="op-70">
								申请时间：{{item.addtime}}
							</view>
							<view class="color">
								{{item.status_name}}
							</view>
						</view>
						<view class="mt-35 pb-40 px-40" style="">
							<view class="fr">
								<view class="mr-30">
									<cut-corner :arrow="2" clipSize="25rpx">
										<image style="width: 150rpx;height: 150rpx;" :src="item.goods_info && item.goods_info.goods_image" mode="widthFix"></image>
									</cut-corner>
								</view>
								<view class="flex-1">
									<view class="">
										{{item.goods_info && item.goods_info.goods_name}}
									</view>
									<view class="color mt-20">
										¥{{item.goods_info && item.goods_info.goods_price}}
									</view>
								</view>
								<view class="ml-20">
									<cut-corner :arrow="3" clipSize="8rpx">
										<view class="color fr-ac-jc" style="width: 54rpx;height: 50rpx;background-color: #215665;">
											x{{item.goods_info && item.goods_info.goods_num}}
										</view>
									</cut-corner>
								</view>
							</view>
							<view class="fr-ac">
								<view class="fr-ac ml-auto">
									<view v-if="item.status != 0 && item.status != 1" @click.stop="goLogistics(item)" class="color">
										查看物流
									</view>
									<view v-if="item.status == 2" @click.stop="get_seckill_order_confirm(item.id)" class="color ml-40">
										确认收货
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				
				<no-more :show="state.list.length == 0"></no-more>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		seckill_order_list,
		warehouse_send_record,
		warehouse_send_confirm,
		seckill_order_confirm,
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.type !== undefined){
			tabs.current = options.type
		}
		if(options.current !== undefined){
			level_tabs.current = options.current
		}
	})
	onShow(()=>{
		nextTick(()=>{
			initData()
			loadData()
		})
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			get_warehouse_send_record()
		}
	})
	
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'赏品订单',
			},
			{
				id:'',
				name:'商城订单',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		loadData()
	}
	
	
	const level_tabs = reactive({
		current:0,
		list:[
			{
				id:0,
				name:'全部',
			},
			{
				id:1,
				name:'待发货',
			},
			{
				id:2,
				name:'待收货',
			},
			{
				id:3,
				name:'已完成',
			}
		]
	})
	function levelTabChange(e){
		level_tabs.current = e.index
		console.log(level_tabs.current)
		initData()
		loadData()
	}
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	function loadData(){
		if(tabs.current == 0){
			get_warehouse_send_record()
		}
		if(tabs.current == 1){
			get_seckill_order_list()
		}
	}

	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yifan_shang/replace`
		})
	}
	
	
	async function get_warehouse_send_record(){
		const res = await warehouse_send_record({
			status: level_tabs.list[level_tabs.current].id,
			page: state.page,
		})
		state.last_limit = res.data.length
		state.list = state.list.concat(res.data)
	}
	
	async function get_seckill_order_list(){
		const res = await seckill_order_list({
			status: level_tabs.list[level_tabs.current].id,
			page: state.page,
		})
		state.last_limit = res.data.length
		state.list = state.list.concat(res.data)
	}
	
	function goLogistics(item){
		uni.navigateTo({
			url: `/pages/order/logistics?id=${item.id}&type=${tabs.current}`
		})
	}
	
	function goDetail(item){
		uni.navigateTo({
			url: `/pages/order/detail?id=${item.id}&type=${tabs.current}`
		})
	}
	
	// 收货
	async function get_warehouse_send_confirm(id){
		const res = await warehouse_send_confirm({
			id
		})
		uni.$u.toast('收货成功！')
		initData()
		loadData()
	}
	async function get_seckill_order_confirm(id){
		const res = await seckill_order_confirm({
			id
		})
		uni.$u.toast('收货成功！')
		initData()
		loadData()
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
</style>